<template>
  <v-form ref="form">
    <v-card>
      <v-card-title>
        <v-row>
          <v-col cols="2" md="2">
            <v-btn @click="save">保存</v-btn>
          </v-col>
        </v-row>
      </v-card-title>
      <v-card-text>
        <v-row>
          <v-col cols="6" md="6">
            <v-card max-height="auto">
              <v-card-title>基本薪酬</v-card-title>
              <v-card-text>
                <v-container>
                  <v-row>
                    <v-col cols="4" md="4" v-for="(item) in inConfigs" :key="item.id">
                      
                        <p v-html="item.htmlText"></p>
                       
                       
                    </v-col>
                  </v-row>
                </v-container>
              </v-card-text>
            </v-card>
          </v-col>
          <v-col cols="6" md="6">
            <v-card max-height="auto">
              <v-card-title>税项扣除</v-card-title>
              <v-card-text>
                <v-container>
                  <v-row></v-row>
                </v-container>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="6" md="6">
            <v-card max-height="auto">
              <v-card-title>保险缴纳</v-card-title>
              <v-card-text>
                <v-container>
                  <v-row></v-row>
                </v-container>
              </v-card-text>
            </v-card>
          </v-col>
          <v-col cols="6" md="6">
            <v-card max-height="auto">
              <v-card-title>专项附加扣除</v-card-title>
              <v-card-text>
                <v-container>
                  <v-row></v-row>
                </v-container>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-form>
</template>

<script>
export default {
    props:{
        filedList:Array,
        payBasicForm:Object,
        inConfigs:Array,
        kouConfigs:Array,
        bxConfigs:Array,
        fjConfigs:Array,


    }  ,
  data() {
    
    return {
    //   filedList: [],
    //   payBasicForm: {},
    //   inConfigs: [],
    //   kouConfigs: [],
    //   bxConfigs: [],
    //   fjConfigs: [],
    //   basePay: 0
    };
  },
  methods: {
    getIn() {
      this.axios.get("/wageConfig/list/1").then(response => {
        this.inConfigs = response.data.data;
        this.inConfigs.forEach(value => {
          this.$set(this.payBasicForm, value.configFiled, 0);
          var item = { value: "payBasicForm." + value.configFiled };
          this.filedList.push(item);
          
        });
      });
    },
    getKou() {
      this.axios.get("/wageConfig/list/2").then(response => {
        this.kouConfigs = response.data.data;
      });
    },
    getBx() {
      this.axios.get("/wageConfig/list/3").then(response => {
        this.bxConfigs = response.data.data;
      });
    },
    getFj() {
      this.axios.get("/wageConfig/list/4").then(response => {
        this.fjConfigs = response.data.data;
      });
    },
    save() {
         this.$forceUpdate();
      console.log(this.payBasicForm);
      console.log(this.filedList);
      
    },
    
  },
  created() {
    this.getIn();
    this.getKou();
    this.getBx();
    this.getFj();
    
  },
  mounted() {},
  beforeUpdate() {},
  beforeMount() {},
  updated() {},
  activated() {},
  computed: {}
};
</script>